<template>
  <div class="center">
    <div class="search clearfix">
      <el-input
        v-model="companyName"
        :clearable="true"
        placeholder="请输入公司名称"
        :style="{ width: '200px' }"
      ></el-input>
      <el-input
        v-model="mobile"
        :clearable="true"
        placeholder="请输入手机号"
        :style="{ width: '200px' }"
      >
      </el-input>
      <el-input
        v-model="tel"
        :clearable="true"
        placeholder="请输入联系电话"
        :style="{ width: '200px' }"
      ></el-input>
      <el-input
        v-model="userName"
        :clearable="true"
        placeholder="请输入联系人"
        :style="{ width: '200px' }"
      ></el-input>
      <el-button type="primary" @click="getacount">查询</el-button>
      <el-button type="primary" @click="add">新增</el-button>
    </div>

    <div class="table">
      <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="租户信息">
      <el-table
        :data="tableData"
        class="customer-table"
        height="71.5vh"
        :header-cell-style="headClass"
      >
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="companyName" label="租户名称" align="center">
        </el-table-column>
        <el-table-column prop="mobile" label="租户手机号" align="center">
        </el-table-column>
        <el-table-column prop="tel" label="联系人号码" align="center">
        </el-table-column>
        <el-table-column prop="userName" label="租户联系人" align="center">
        </el-table-column>
        <el-table-column  label="创建时间" align="center">
          <template slot-scope="scope">
            {{scope.row.createTime.substring(0,10)}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="change(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        @prev-click="prevclick"
        @next-click="nextclick"
        :current-page="currentPage"
        :page-size="pagesize"
        layout="total,prev, pager, next"
        :total="total"
      >
      </el-pagination>
      </dv-border-box-11>
    </div>

    <!-- 新增租户 -->
    <el-dialog
      class="account-add"
      title="新增租户"
      :inline="true"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
    >
      <el-form
        class="clearfix"
        :model="addform"
        ref="addruleform"
        label-position="left"
        label-width="120px"
        :rules="addrules"
      >
        <el-form-item label="租户名称" prop="companyName">
          <el-input v-model="addform.companyName"></el-input> </el-form-item
        ><el-form-item label="租户手机号" prop="mobile">
          <el-input v-model="addform.mobile"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="userName">
          <el-input v-model="addform.userName"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="tel">
          <el-input v-model="addform.tel"></el-input>
        </el-form-item>
        <el-form-item label="省" prop="provincecode">
          <el-select
            v-model="addform.province"
            placeholder="省"
            @change="handleChange($event)"
          >
            <el-option
              v-for="(item, index) in province"
              :key="item.code"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="citycode">
          <el-select
            v-model="addform.city"
            placeholder="市"
            @change="handleChange1($event)"
          >
            <el-option
              v-for="(item, index) in city"
              :key="item.code"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区" prop="areacode">
          <el-select
            v-model="addform.area"
            placeholder="区"
            @change="handleChange2($event)"
          >
            <el-option
              v-for="(item, index) in area"
              :key="item.code"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="addform.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addaccount(addform)"
            >新增</el-button
          >
          <el-button @click="addout">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 租户编辑 -->
    <el-dialog
      class="account-update"
      title="租户编辑"
      :inline="true"
      :visible.sync="dialogFormVisible1"
      :append-to-body="true"
    >
      <el-form
        class="clearfix"
        :model="updateform"
        ref="updateruleform"
        label-position="left"
        label-width="100px"
        :rules="updaterules"
      >
        <el-form-item label="租户名称" prop="companyName">
          <el-input v-model="updateform.companyName"></el-input> </el-form-item
        ><el-form-item label="租户手机号" prop="mobile">
          <el-input v-model="updateform.mobile"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="userName">
          <el-input v-model="updateform.userName"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="tel">
          <el-input v-model="updateform.tel"></el-input>
        </el-form-item>
        <el-form-item label="省" prop="provinceCode">
          <el-select
            v-model="updateform.province"
            placeholder="省"
            @change="provincehandleChange($event)"
          >
            <el-option
              v-for="(item, index) in province"
              :key="item.code"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="cityCode">
          <el-select
            v-model="updateform.city"
            placeholder="市"
            @change="cityhandleChange($event)"
          >
            <el-option
              v-for="(item, index) in city"
              :key="item.code"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区" prop="areaCode">
          <el-select
            v-model="updateform.district"
            placeholder="区"
            @change="areahandleChange($event)"
          >
            <el-option
              v-for="(item, index) in area"
              :key="item.code"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="updateform.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="changeaccount(updateform)">修改</el-button>
          <el-button @click="changeout">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name:'accounts',
  data() {
    //手机号校验
    let validMobile = (rule, value, callback) => {
      if (value == "" || value == undefined) {
        callback(new Error("手机号不能为空"));``
      } else {
        let reg = /^1[3|4|5|7|8][0-9]{9}$/;
        if (!reg.test(value)) {
          callback(new Error("手机号格式不对"));
        } else {
          callback();
        }
      }
    };
    return {
      companyName: "",
      mobile: "",
      tel: "",
      userName: "",
      currentPage: 1,
      pagesize: 10,
      total: 0,
      tableData: [],
      dialogFormVisible: false,//租户新增弹窗
      dialogFormVisible1: false,//租户编辑弹窗
      province: [],
      city: [],
      area: [],
      addform: {
        companyName: "",
        mobile: "",
        province: "",
        city: "",
        area: "",
        provincecode: "",
        citycode: "",
        areacode: "",
        userName: "",
        tel: "",
        address: "",
      },
      addrules: {
        companyName: [
          { required: true, message: "详细地址不能为空", trigger: "blur" },
        ],
        provincecode: [
          { required: true, message: "省份不能为空", trigger: "blur" },
        ],
        citycode: [{ required: true, message: "市不能为空", trigger: "blur" }],
        mobile: [{ required: true, validator: validMobile, trigger: "blur" }],
        tel: [{ required: true, validator: validMobile, trigger: "blur" }],
        userName: [
          { required: true, message: "联系人不能为空", trigger: "blur" },
        ],
        address: [{ required: true, message: "地址不能为空", trigger: "blur" }],
      },
      addruleform: {
        companyName: "",
        mobile: "",
        provincecode: "",
        citycode: "",
        userName: "",
        tel: "",
        address: "",
      },
      updateform: {
        companyName: "",
        mobile: "",
        province: "",
        city: "",
        district: "",
        provinceCode: "",
        cityCode: "",
        districtCode: "",
        userName: "",
        tel: "",
        address: "",
      },
      updaterules: {
        companyName: [
          { required: true, message: "详细地址不能为空", trigger: "blur" },
        ],
        provinceCode: [
          { required: true, message: "省份不能为空", trigger: "blur" },
        ],
        cityCode: [{ required: true, message: "市不能为空", trigger: "blur" }],
        mobile: [{ required: true, validator: validMobile, trigger: "blur" }],
        tel: [{ required: true, validator: validMobile, trigger: "blur" }],
        userName: [
          { required: true, message: "联系人不能为空", trigger: "blur" },
        ],
        address: [{ required: true, message: "地址不能为空", trigger: "blur" }],
      },
      updateruleform: {
        companyName: "",
        mobile: "",
        provinceCode: "",
        cityCode: "",
        userName: "",
        tel: "",
        address: "",
      },
    };
  },
  watch:{
    currentPage(){
      this.getacount();
    }
  },
  methods: {
    headClass() {
      return "background-color: transparent;color:#fff;font-weight:bold;";
    },
    //获取租户信息
    getacount() {
      let params = {
        companyName: this.companyName,
        mobile: this.mobile,
        tel: this.tel,
        userName: this.userName,
        page: {
          pageNo: this.currentPage,
          pageSize: this.pagesize,
        },
      };
      this.$http
        .post("/tenant/list", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.total = res.data.b.total;
            this.tableData = res.data.b.records;
          }
        })
        .catch((err) => {});
    },
    //修改租户信息开始
    change(row) {
      this.dialogFormVisible1 = true;
      this.getprovince();
      this.updateform = Object.assign(this.updateform, row);
    },
    changeaccount(form) {
      let params = {
        id: form.id,
        companyName: form.companyName,
        province: form.province,
        city: form.city,
        district: form.district,

        provinceCode: form.provinceCode,
        cityCode: form.cityCode,
        districtCode: form.districtCode,
        mobile: form.mobile,
        userName: form.userName,
        tel: form.tel,
        address: form.address,
      };
      this.$refs.updateruleform.validate((valid) => {
        if (valid) {
          this.$http
            .post("/tenant/update", params)
            .then((res) => {
              if (res.data.h.code == 0) {
                this.changeout();
                this.getacount();
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
              }
            })
            .catch((err) => {});
        } else {
          this.$message({
            message: "表单填写有误，请重新填写",
            type: "warning",
          });
          return false;
        }
      });
    },
    changeout() {
      this.$refs.updateruleform.clearValidate();
      this.dialogFormVisible1 = false;
      this.updateformclear();
    },
    //新增租户开始
    add() {
      this.dialogFormVisible = true;
      this.getprovince();
    },
    addout() {
      this.dialogFormVisible = false;
      this.$refs.addruleform.clearValidate();
      this.addformclear();
    },
    addaccount(form) {
      let params = {
        companyName: form.companyName,
        province: form.province,
        city: form.city,
        district: form.area,

        provinceCode: form.provincecode,
        cityCode: form.citycode,
        districtCode: form.areacode,
        mobile: form.mobile,
        userName: form.userName,
        tel: form.tel,
        address: form.address,
      };
      this.$refs.addruleform.validate((valid) => {
        if (valid) {
          this.$http
            .post("/tenant/add", params)
            .then((res) => {
              if (res.data.h.code == 0) {
                this.addout();
                this.getacount();
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
              }
            })
            .catch((err) => {});
        } else {
          this.$message({
            message: "表单填写有误，请重新填写",
            type: "warning",
          });
          return false;
        }
      });
    },
    getprovince() {
      let params = {
        superCode: "",
      };
      this.$http
        .post("/area/getChild", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.province = res.data.b;
          }
        })
        .catch((err) => {});
    },
    //删除租户
    handleDelete(row) {
      this.$confirm("此操作将删除该租户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.get("/tenant/del/" + row.id).then((res) => {
            if (res.data.h.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              //重新请求租户列表
              this.getacount();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //上一页
    prevclick() {
      this.currentPage--;
    },
    //下一页
    nextclick() {
      this.currentPage++;
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleChange($event) {
      this.city = [];
      this.area = [];
      this.addform.city = "";
      this.addform.province = $event.name;
      this.addform.provincecode = $event.code;
      this.addform.area = "";
      let params = {
        superCode: this.addform.provincecode || "",
      };
      this.$http
        .post("/area/getChild", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.city = res.data.b;
          }
        })
        .catch((err) => {});
    },
    provincehandleChange($event) {
      this.city = [];
      this.area = [];
      this.updateform.city = "";
      this.updateform.district = "";
      this.updateform.province = $event.name;
      this.updateform.provinceCode = $event.code;
      let params = {
        superCode: this.updateform.provinceCode || "",
      };
      this.$http
        .post("/area/getChild", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.city = res.data.b;
          }
        })
        .catch((err) => {});
    },
    handleChange1($event) {
      this.area = [];
      this.addform.area = "";
      this.addform.city = $event.name;
      this.addform.citycode = $event.code;
      let params = {
        superCode: this.addform.citycode || "",
      };
      this.$http
        .post("/area/getChild", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.area = res.data.b;
          }
        })
        .catch((err) => {});
    },
    cityhandleChange($event) {
      this.area = [];
      this.updateform.district = "";
      this.updateform.city = $event.name;
      this.updateform.cityCode = $event.code;
      let params = {
        superCode: this.updateform.cityCode || "",
      };
      this.$http
        .post("/area/getChild", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.area = res.data.b;
          }
        })
        .catch((err) => {});
    },
    handleChange2($event) {
      this.addform.area = $event.name;
      this.addform.areacode = $event.code;
    },
    areahandleChange($event) {
      this.updateform.district = $event.name;
      this.updateform.districtCode = $event.code;
    },
    //新增租户表单清空
    addformclear() {
      for (let i in this.addform) {
        this.addform[i] = "";
      }
    },
    //编辑租户表单清空
    updateformclear() {
      for (let i in this.updateform) {
        this.updateform[i] = "";
      }
    },
  },
  mounted() {
    this.getacount();
  },
};
</script>
<style scoped>
.center {
  position: relative;
}
.search {
  padding-left: 20px;
  box-sizing: border-box;
  display: inline-block;
}
.search .el-select {
  float: left;
  width: 120px;
  margin-right: 10px;
}
.search .el-input {
  float: left;
  width: 150px;
  margin-right: 10px;
}
.table {
  box-sizing: border-box;
  height:83vh;
}
.el-pagination {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.account-add .el-form {
  padding: 15px;
  box-sizing: border-box;
}
.account-add .el-form .el-form-item {
  display: inline-block;
  width: 45%;
}
.account-add .el-form .el-form-item {
  display: inline-block;
  width: 45%;
}
.account-add .el-form .el-form-item .el-select {
  display: block;
}
.account-add .el-form .el-form-item:nth-of-type(2n + 1) {
  margin-right: 2%;
}
.account-update .el-form {
  padding: 15px;
  box-sizing: border-box;
}
.account-update .el-form .el-form-item {
  display: inline-block;
  width: 45%;
}
.account-update .el-form .el-form-item {
  display: inline-block;
  width: 45%;
}
.account-update .el-form .el-form-item .el-select {
  display: block;
}
.account-update .el-form .el-form-item:nth-of-type(2n + 1) {
  margin-right: 2%;
}

</style>
<style>
.customer-table th {
  border: none;
}
.customer-table td,
.customer-table th.is-leaf {
  border: none;
}
</style>